<template>
  <section class="yuan_data">
    <p class="form1">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">新增</el-button>
      <el-button type="primary" style="float: right;" @click="search">搜索</el-button>
      <el-input v-model="form.search" placeholder="请输入内容" style="width: 130px;float: right;"></el-input>
    </p>
    <p class="sort">
      <span style="font-size: 18px;margin-right: 10px;">排序</span>
      <el-button
        type="primary"
        @click="changeSort('isCreatDataIcon',$event)"
        icon="el-icon-back"
        :class="form.sortTime==='asc'?'up':'down'"
      >创建时间</el-button>
      <el-button
        type="primary"
        @click="changeSort('isNumIcon',$event)"
        icon="el-icon-back"
        :class="form.sortNumber==='asc'?'up':'down'"
      >引用数量</el-button>
    </p>
    <el-row :gutter="30" class="data_manage">
      <el-col :span="6" class="data_item" v-for="(item,index) in dataManage" :key="index">
        <p class="first_p normal">{{item.name}}</p>
        <p class="normal">{{item.key}}</p>
        <p class="normal">{{dataType[item.dataType]}}</p>
        <p class="hover">
          <span @click="detail(item.id)">详情</span>
        </p>
        <p class="hover">
          <span @click="updataDiy(item.id)">修改</span>
        </p>
        <p class="hover">
          <span @click="del(item.id)">删除</span>
        </p>
      </el-col>
      <p v-if="dataManage.length===0" style="text-align: center;">暂无数据</p>
    </el-row>
    <!-- 分页 -->
    <p style="margin-top: 20px;text-align: right;">
      <el-pagination
        background=""
        :current-page.sync="form.pageNum"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-size="form.pageSize"
        :total="total"
      ></el-pagination>
    </p>
    <!-- Dialog -->
    <el-dialog
      :title="titleDiy"
      :visible.sync="dialogVisible1"
      width="50%"
      class="diy-dialog"
      :append-to-body="true"
    >
      <form-diy
        @insertData="insertData"
        @closeForm="closeForm"
        :type="dialog1Type"
        :content="currentPage"
        :detail="detailData"
      ></form-diy>
    </el-dialog>
  </section>
</template>

<script>
import formDiy from "../components/formDiy";
import {
  componentGetYuanData,
  componentGetYuanDataDeatil,
  componentDelYuanData,
  componentAddYuanData,
  componentUpdataYuanData
} from "../components/computedFuwuServer";
export default {
  components: {
    formDiy
  },
  data() {
    return {
      total:0,
      updataId: 0,
      currentPage: "yuanData",
      titleDiy: "",
      dialog1Type: "",
      dialogVisible1: false,
      isCreatDataIcon: false /*创建时间的图标*/,
      isNumIcon: true /*引用数量的图标*/,
      form: {
        search: "",
        sortTime: "asc",
        sortNumber: "asc",
        pageNum: 1,
        pageSize: 6
      },
      detailData: {},
      dataManage: [],
      dataType: ["null", "采集类", "共享返回类", "共享请求类"]
    };
  },
  methods: {
    closeForm() {
      /*关闭弹窗*/
      this.dialogVisible1 = false;
    },
    changeSort(val, ev) {
      /*改变顺序*/
      if (val === "isCreatDataIcon") {
        this.form.sortTime = this.form.sortTime === "asc" ? "desc" : "asc";
      } else if (val === "isNumIcon") {
        this.form.sortNumber = this.form.sortNumber === "asc" ? "desc" : "asc";
      }
      this.search();
    },
    add() {
      this.updataId = 0;
      this.titleDiy = "新增元数据";
      this.dialog1Type = "add";
      this.dialogVisible1 = true;
    },
    detail(val) {
      /*打开详情*/
      componentGetYuanDataDeatil(this, { id: val });
      this.titleDiy = "详情页面";
      this.dialog1Type = "detail";
      this.dialogVisible1 = true;
    },
    updataDiy(val) {
      /*打开修改*/
      componentGetYuanDataDeatil(this, { id: val });
      this.updataId = val;
      this.titleDiy = "修改元数据";
      // this.dialog1Type = 'add';
      this.dialog1Type = "update";
      this.dialogVisible1 = true;
    },
    del(val) {
      /*删除元数据*/
      componentDelYuanData(this, { id: val });
    },
    search() {
      /*搜索*/
      componentGetYuanData(this, this.form);
    },
    insertData(param) {
      /*插入元数据,更新元数据*/
      this.updataId === 0
        ? componentAddYuanData(this, param)
        : componentUpdataYuanData(this, { id: this.updataId }, param);
      this.closeForm();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.search();
    }
  },
  mounted() {
    this.search();
   
  }
};
</script>

<style>
.yuan_data .form1 {
  margin: 10px;
  border-bottom: dashed 1px #a7a4a4;
  padding-bottom: 25px;
}
.yuan_data .sort {
  text-align: right;
}
.yuan_data .up .el-icon-back {
  transform: rotate(90deg);
}
.yuan_data .down .el-icon-back {
  transform: rotate(-90deg);
}
.yuan_data .data_manage {
}
.yuan_data .data_item {
  height: 150px;
  background: orange;
  /* max-width: 231px; */
  width: 10%;
  margin: 0 5%;
  min-width: 120px;
  max-width: 140px;
  padding-left: unset !important;
  padding-right: unset !important;
  border: solid 1px #c1c1c1;
  box-sizing: content-box;
  margin-top: 20px;
}
.yuan_data .data_item p {
  height: 50px;
  background: #ebecf2;
  text-align: center;
  line-height: 50px;
  font-size: 15px;
  color: #000000;
}
.yuan_data .data_item p.first_p {
  background: #85beeb;
  color: #fff;
}
.hover {
  display: none;
}

.hover span {
  display: inline-block;
  background: #469ff8;
  width: 90px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 50px;
}
.data_item:hover .hover {
  display: block;
}
.data_item:hover .normal {
  display: none;
}
@keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
</style>